<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
<body>
<div id="root"></div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    Vue.prototype.x = 99;
    const school = Vue.extend({
        name: 'school',
        template: `
          <div>
          <h2>学校名称：{{ name }}</h2>
          <h2>学校地址：{{ address }}</h2>
          <button @click="showX">显示x</button>
          </div>
        `,
        data() {
            return {
                name: "abc",
                address: "深圳"
            }
        },
        computed: {},
        components: {},
        methods: {
            showX(e){
                alert(this.x);
            }
        },
        watch: {},
        filters: {},
        directives: {}
    });
    const app = Vue.extend({
        name: 'app',
        template: `
          <school></school>
        `,
        data() {
            return {}
        },
        computed: {},
        components: {
            school
        },
        methods: {},
        watch: {},
        filters: {},
        directives: {}
    });
    new Vue({
        el: '#root',
        template:`
            <app></app>
        `,
        data() {
            return {}
        },
        computed: {},
        components: {app},
        methods: {},
        watch: {},
        filters: {},
        directives: {}
    });
    // console.log(school.prototype.__proto__ === Vue.prototype)
    // 演示
    /*function Demo() {
        this.a = 1;
        this.b = 2;
    }

    const d = new Demo();

    // 显式原型属性
    console.log("Demo.prototype", Demo.prototype);

    // 隐式原型属性
    console.log("d.__proto__", d.__proto__);

    Demo.prototype.x = 99;
    console.log("d.__proto__.x", d.__proto__.x);
    console.log("d.x", d.x);*/
</script>
</html>